// 1.引入 react  和 reactDOM
import React from "react"
import ReactDOM  from "react-dom";
import {createRoot} from "react-dom/client"
import H2 from "./components/H2"

import Comment  from "./components/comment/comment";

import Connection from "./components/connection/connection";

// 2.创建react元素
// 方法一：旧写法
// let h1=React.createElement('h1',null,'一级标题');
// let h2=React.createElement('h2',null,'二级标题');
// let box=React.createElement('div',null,h1,h2)

// 方法二：JSX的写法  
// let userName="张三";
// let age=18;
// function test(){
//   let x=666;
//   console.log(x);
//   return 666
// }
// function fn(flag){
//   if(flag){
//     return <div>开关打开~~~</div>
//   }else{
//     return <div>开关关闭~~~</div>
//   }
// }

// let list=[
//   {name:'唐僧',age:38},
//   {name:'悟空',age:680},
//   {name:'八戒',age:1380},
//   {name:'沙僧',age:3800},
// ]

// let box=<div>
//   {/* 使用变量 */}
//   <h1>一级标题---{userName}</h1>
//   {/* 运算 */}
//   <h2>二级标题----{age>18 ? "成年人" : "未成年人"}</h2>
//   {/* 调用函数 */}
//   <h2>二级标题----{test()}</h2>
//   {/* 条件渲染 */}
//   <div>{fn(false)}</div>
//   {/* 列表渲染 */}
//   <ul>
//                                  { /* 样式处理 */ }
//     {list.map((item,index)=><li className="qwe" style={{color:'red',backgroundColor:'yellow'}} key={index}>{item.name}-----{item.age}</li>)}
//   </ul>
  

// </div>


// 3.渲染react元素
// let container=document.getElementById("root");
// let root=createRoot(container);
// root.render(box);


// 2.创建 react 组件
// 方法一：使用函数创建组件(又称为：无状态组件)
// 注意：函数名首字母必须是大写
// 注意：状态（state:数据）
// 注意：使用函数创建的组件没有自己的状态，因此只能数据做静态展示，不能做到动态更新
function H1(){
  // 事件处理函数
  function test(e){
    // e:合成事件对象
    console.log('鼠标移入')
    console.log("合成事件对象：",e);
  }
  let num=10;
  return (
  <div>
    <h1 onMouseEnter={test}>React 基础----{num}</h1>
    <button onClick={()=>{
      num++;
      console.log(num);
    }}>+1</button>
  </div>
  )
}

// 方法二：使用类创建组件（又称为：有状态组件）
// 注意：类名首字母必须是大写
// 注意：类创建的组件有自己的状态，可以做到数据的动态展示
// 注意：修改状态中的数据必须使用setState()方法
// 注意：使用类方法创建的组件中的事件处理函数的this,默认是undefined
// 修改事件处理函数的this指向的方法
// （1）在使用的时候，在外层包一个箭头函数
// (2)在构造器中，把事件处理函数的this指向使用bind方法进行绑定
// （3）直接把事件处理函数改成箭头函数
class H3 extends React.Component{
  // 定义数据
  // 方法一：使用构造器
  // constructor(){
  //   super()
  //   this.state={
  //     num:0
  //   }
  //   // this.test=this.test.bind(this)
  // }

  // 方法二：
  state={
    num:0
  }

  // 事件处理函数
  test=(e)=>{
    console.log('触发了点击事件',this);

    // console.log("合成事件对象：",e);
    // this.state.num++;
    this.setState({
      num:this.state.num+1
    })

  }
   
  render(){
    return <h3 onClick={this.test}>react 事件处理---------{this.state.num}</h3>
  }
}




// 表单处理
// 1.受控组件
// 2.非受控组件

// 单行文本框
class Input extends React.Component{
  state={
    text:"123"
  }
  // 事件处理函数
  test=e=>{
    console.log("合成事件对象：",e.target.value);
    this.setState({
      text:e.target.value
    })
  }
  render(){
    return <input type="text" value={this.state.text} onChange={this.test}></input>
  }
}

// 多行文本框
class Textarea extends React.Component{
  state={
    text:"123"
  }
  // 事件处理函数
  test=e=>{
    console.log("合成事件对象：",e.target.value);
    this.setState({
      text:e.target.value
    })
  }
  render(){
    return <textarea type="text" value={this.state.text} onChange={this.test}></textarea>
  }
}

// 下拉框
class Select extends React.Component{
  state={
    city:"bj"
  }
  // 事件处理函数
  test=e=>{
    console.log("合成事件对象：",e.target.value);
    this.setState({
      city:e.target.value
    })
  }
  render(){
    return <select type="text" value={this.state.city} onChange={this.test}>
      <option value={'sh'}>上海</option>
      <option value={'bj'}>北京</option>
      <option value={'cd'}>成都</option>
      <option value={'sz'}>深圳</option>
    </select>
  }
}

// 单选框(多选框)
class CheckBox extends React.Component{
  state={
    flag:true
  }
  // 事件处理函数
  test=e=>{
    console.log("合成事件对象：",e.target.value);
    this.setState({
      flag:e.target.checked
    })
  }
  render(){
    return <input type="checkbox" value={'666'} checked={this.state.flag} onChange={this.test}></input>
  }
}


// 非受控组件
class Input2 extends React.Component{
  constructor(){
    super()
    // 创建ref对象
    this.textRef=React.createRef()
  }
  getData=(e)=>{
    // console.log(e.target.value)
    console.log(this.textRef.current.value)
  }
  render(){
    return <div>
    <input type="text" onChange={this.getData} ref={this.textRef}></input>
    </div>
  }
}


// 3.渲染react元素
let container=document.getElementById("root");
let root=createRoot(container);
root.render(<div>

   {/* <Comment></Comment> */}
   <Connection></Connection>
  </div>);